<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title>
            Readability Test
        </title>
        <style>
        <![CDATA[
        body {
                font-family: sans-serif;
                margin: 0 auto;
                max-width: 900px;
                padding: 1em 2em;
        }
        img {
                max-width: 100%;
        }
        ]]>
        </style>
    </head>
    <body>
        <h1>
            Readability Test
        </h1>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </p>
        <hr />
        <h2>
            Single &lt;img&gt;
        </h2>
        <p>
            <img src="florian-giorgio-P1U7-ZgKeOM-unsplash.jpg" alt="An image" />
        </p>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </p>
        <hr />
        <h2>
            Single &lt;figure&gt;
        </h2>
        <figure>
            <img src="florian-giorgio-P1U7-ZgKeOM-unsplash.jpg" alt="An image" />
            <figcaption>
                Caption of the figure
            </figcaption>
        </figure>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </p>
        <hr />
        <h2>
            &lt;ul&gt; List of &lt;img&gt;
        </h2>
        <ul>
            <li>
                <img src="florian-giorgio-P1U7-ZgKeOM-unsplash.jpg" alt="An image" />
            </li>
            <li>
                <img src="florian-giorgio-P1U7-ZgKeOM-unsplash.jpg" alt="An image" />
            </li>
            <li>
                <img src="florian-giorgio-P1U7-ZgKeOM-unsplash.jpg" alt="An image" />
            </li>
        </ul>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </p>
        <hr />
        <h2>
            &lt;ul&gt; List of &lt;figure&gt;
        </h2>
        <ul>
            <li>
                <figure>
                    <img src="florian-giorgio-P1U7-ZgKeOM-unsplash.jpg" alt="An image" />
                    <figcaption>
                        Caption of the figure
                    </figcaption>
                </figure>
            </li>
            <li>
                <figure>
                    <img src="florian-giorgio-P1U7-ZgKeOM-unsplash.jpg" alt="An image" />
                    <figcaption>
                        Caption of the figure
                    </figcaption>
                </figure>
            </li>
            <li>
                <figure>
                    <img src="florian-giorgio-P1U7-ZgKeOM-unsplash.jpg" alt="An image" />
                    <figcaption>
                        Caption of the figure
                    </figcaption>
                </figure>
            </li>
        </ul>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </p>
    </body>
</html>
